<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/move.css">
    <link rel="stylesheet" href="../lib/bootstrap-3.3.5-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../font/font_ljh/iconfont.css">
    <script src="../lib/bootstrap-3.3.5-dist/js/jquery-1.11.3.js"></script>
    <script src="../lib/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/index.css">

    <title>Document</title>
    <style>
      #mulu {
        padding: 10px 36px;
      }
      #mulu>span:not(:last-child) {
        margin-right: 10px;
        color: #AAA;
        cursor: pointer;
      }
      #mulu>span a:hover {
        color: #1890FF;
      }
      #mulu>p {
        font-size: 20px;
        font-weight: 700;
        margin: 20px 15px;
      }
      #mingxi>p,
      #mingxi>div {
        font-size: 16px;
        font-weight: 700;
        margin: 20px;
      }
      #mingxi>div>span {
        color: #AAA;
        font-size: 14px;
        font-weight: 100;
      }
      .bai {
        /* border: 1px solid rebeccapurple; */
        margin: 30px 0;
        padding: 0 3%;
        background-color: #fff;
        border-radius: 5px;
      }
      #mingxi ul li {
        list-style: none;
        font-size: 14px;
        font-weight: lighter;
        text-decoration: none;
        float: left;
        margin-left: 20px;
        cursor: pointer;
      }
      #mingxi ul {
        float: right;
      }
      .bianbian {
        margin-top: 120px;
      }
    </style>
</head>

<body>
  <div class="kong11">
    <div id="mulu">
      <span><a href="./shouye.html">首页</a> /</span>
      <span>运动健康 /</span>
      <span>数据查询_运动 /</span>
      <span>睡眠明细</span>
      <p>运动明细</p>
    </div>
    <div class="bianbian">

      <div class="container-fluid bai">
        <div id="mingxi">
          <p>用户信息</p>
          <div>运动明细
            <span>2019-11-30至2019-12-20</span>
            <ul class="clear">
              <li><a href="#">导出数据</a></li>
              <li>
                <span class="iconfont">&#xe633;</span>
              </li>
              <li>
                <span class="iconfont">&#xe632;</span>
              </li>
              <li>
                <span class="iconfont">&#xe625;</span>
              </li>
            </ul>
          </div>
          </div>
          <div id="tdheight">
            <table class="table ">
                <thead>
                    <tr class="huise">
                      <th>日期</th>
                      <th>跑步距离</th>
                      <th>跑步时长</th>
                      <th>深蹲数量</th>
                      <th>深蹲时长</th>
                      <th>仰卧起坐数量</th>
                      <th>仰卧起坐时长</th>
                      <th>俯卧撑数量</th>
                      <th>俯卧撑时长</th>
                    </tr>
                </thead>
                <tbody id="mingxi_tbody">
                    <!-- <tr>
                      <td>北京市</td>
                      <td>2222</td>
                    </tr>
                    <tr>
                      <td>333</td>
                      <td>2222</td>
                    </tr>
                    <tr>
                      <td>333</td>
                      <td>2222</td>
                    </tr> -->
                </tbody>
            </table>
            
          </div>
    
        </div>
      </div>


      

      <script>

        let yundongData = [
          {yundongDate: '2019-11-30', paobuDistance: '3公里', paobuTime: '2小时', shendunNum: '12个', shendunTime: '1分钟', yangwoNum: '20个', yangwoTime: '1分钟', fuwoNum: '18个', fuwoTime: '2分钟'},
          {yundongDate: '2019-12-01', paobuDistance: '5公里', paobuTime: '3小时', shendunNum: '22个', shendunTime: '1分钟', yangwoNum: '30个', yangwoTime: '1分钟', fuwoNum: '22个', fuwoTime: '2分钟'},
          {yundongDate: '2019-12-05', paobuDistance: '6公里', paobuTime: '4小时', shendunNum: '45个', shendunTime: '1分钟', yangwoNum: '40个', yangwoTime: '1分钟', fuwoNum: '38个', fuwoTime: '2分钟'},
          {yundongDate: '2019-12-10', paobuDistance: '7公里', paobuTime: '5小时', shendunNum: '56个', shendunTime: '1分钟', yangwoNum: '50个', yangwoTime: '1分钟', fuwoNum: '42个', fuwoTime: '2分钟'},
          {yundongDate: '2019-12-20', paobuDistance: '9公里', paobuTime: '6小时', shendunNum: '68个', shendunTime: '1分钟', yangwoNum: '60个', yangwoTime: '1分钟', fuwoNum: '50个', fuwoTime: '2分钟'},
]
        function showTable(data){
          // $('#mingxi_tbody').html('')
          $.each(data, (index, item) => {
          $('#mingxi_tbody').append(`
            <tr>
              <td>${item.yundongDate}</td>  
              <td>${item.paobuDistance}</td>  
              <td>${item.paobuTime}</td>  
              <td>${item.shendunNum}</td>  
              <td>${item.shendunTime}</td>  
              <td>${item.yangwoNum}</td>  
              <td>${item.yangwoTime}</td>  
              <td>${item.fuwoNum}</td>       
              <td>${item.fuwoTime}</td>       
            </tr>
          `)
          })
        }
        showTable(yundongData)
      </script>

<script src="../JavaScript/index.js"></script>
<script src="../JavaScript/data.js"></script>
<script src="../JavaScript/utils.js"></script>

</body>

</html>